<template>
    <ul class="files clearfix grid-list">
        <li v-if="!list" style="height: 200px;border: none;"></li>
        <template v-else>
            <li v-for="($item ,index) in list" :key="index">
                <div class="file-select">
                    <input type="checkbox"
                           :value="$item['name']"
                           name="multiple-delete"
                    />
                </div>
                <div v-html="$item['preview']"
                     @click.prevent="mapToListClick($item)"></div>
                <div class="file-info">
                    <a @click.prevent="mapToListClick($item)"
                       class="file-name"
                       :title=" $item['name']">
                        {{ $item['icon'] }} {{ $item['basename'] }}
                    </a>
                    <div class="file-size">
                        {{ $item['size'] }}&nbsp;
                        <div class="btn-group btn-group-xs pull-right">
                            <button type="button" class="btn btn-default btn-xs dropdown-toggle"
                                    data-toggle="dropdown">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a class="file-rename"
                                       v-if="canEdit"
                                       @click.prevent="mapRenameOrMove($item)"
                                    >
                                        重命名&移动文件
                                    </a>
                                </li>
                                <li v-if="canDelete">
                                    <a class="file-delete"
                                       @click.prevent="handleDelete($item['name'])"
                                    >
                                        删除
                                    </a>
                                </li>
                                <li v-if="!$item['isDir']">
                                    <a target="_blank"
                                       :href="`/api/media/download?file=${$item['name']}`"
                                    >
                                        下载
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        </template>

    </ul>
</template>

<script>

    export default {
        name   : "media-grid-list",
        props  : [ 'list', 'canDelete', 'canUpload', 'canEdit' ],
        data() {
            return {
                dialogVisible: false,
                previewItem  : null,
            };
        },
        mounted() {
            $('.file-select>input').iCheck({ checkboxClass: 'icheckbox_minimal-blue' });
        },
        methods: {
            mapToListClick(item) {
                this.$emit('listClick', item);
            },
            mapRenameOrMove(item) {
                this.$emit('renameOrMove', item);
            },
            handleDelete(file) {
                this.$emit('deleteFile', file)
            }
        },
    }
</script>

<style lang="less">

    .grid-list.files {
        list-style: none;
        margin: 0;
        padding: 0;

        & > li {
            float: left;
            width: 150px;
            border: 1px solid #eee;
            margin-bottom: 10px;
            margin-right: 10px;
            position: relative;

            & > .file-select {
                position: absolute;
                top: -4px;
                left: -1px;
            }
        }

        .file-icon {
            text-align: center;
            font-size: 65px;
            color: #666;
            display: block;
            height: 100px;

            &.has-img {
                padding: 0;

                & > img {
                    max-width: 100%;
                    height: auto;
                    max-height: 92px;
                }
            }
        }

        .file-info {
            text-align: center;
            padding: 10px;
            background: #f4f4f4;
        }

        .file-name {
            font-weight: bold;
            color: #666;
            display: block;
            overflow: hidden !important;
            white-space: nowrap !important;
            text-overflow: ellipsis !important;
        }

        .file-size {
            color: #999;
            font-size: 12px;
            display: block;
        }
    }

    .video-preview {
        video {
            width: 100%;
        }
    }

</style>
